<template>
	<view class="colorful-ring" :style="'line-height:'+width+'px;width:'+width+'px;height:'+width+'px;top:calc((100% - ' + width + 'px)/2);left:calc((100% - '+width +'px)/2);'">
		<view :style="'width:'+width+'px'">{{text}}</view>
	</view>
</template>

<style scoped>
	.colorful-ring view{text-align: center;}
	.colorful-ring {
	  border-radius: 50%;
	  position: relative;
	  font-size:.8rem;
	  color:#999;
	}
	
	/* 基础圆环 */
	.colorful-ring::before {
	  content: '';
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  border-radius: inherit;
	  background: conic-gradient(
	    #ff6b6b,
	    #ff9ff3,
	    #45b7d1,
	    #4ecdc4,
	    #ff6b6b
	  );
	  animation: rotate 2s linear infinite;
	  mask: 
	    radial-gradient(
	      circle at center,
	      transparent 60%,
	      black 50.5%
	    ); /* 挖空中心形成圆环 */
	}
	
	@keyframes rotate {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
</style>

<script>
	export default {
		name:"zmt-colorful-ring",
		data() {
			return {
					
			};
		},
		props:{
			text:{ //展示的数据
				type:String,
				default:'排队中'
			},
			width:{ //宽度
				type:Number,
				default:70
			}
		}
	}
</script>
